<template>
	<view class="unloginBigBox">
		<!-- 滚动通知栏 -->
		<van-notice-bar left-icon="volume-o" scrollable text="登录后尽享各种权限权益" />

		<view class="unloginBox">
			<!-- 未登录头像 -->
			<image class="avatar" src="/static/pages/unloginAvatar.png" mode=""></image>
			<!-- 登录按钮 -->
			<button class="login" @click="login" type="primary">立即登录</button>
			<button class="cancel" @click="cancel" type="warn">取消登录</button>
		</view>
	</view>

</template>

<script>
	const app = getApp()
	
	export default {
		name: 'unlogin',
		methods:{
			login() {
				// 调用登录函数
				app.login()
			},
			cancel(){
				uni.switchTab({
					url:'/pages/home/home'
				}).then(()=>{
					uni.showToast({
						title:'您取消了登录',
						icon:"error"
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.unloginBigBox {
		width: 100vw;
		height: 100vh;

		.unloginBox {
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			// 头像
			.avatar {
				margin-top: -350rpx;
				margin-bottom: 50rpx;
				width: 200rpx;
				height: 200rpx;
			}

			// 登录
			.login {
				background-color: #5a53c8;
				width: 60%;
				margin-bottom: 20rpx;
			}
			// 取消登录
			.cancel{
				background-color: #999bff;
				width: 60%;
			}
		}
	}
</style>
